<template>
	<view>
		<search-slot>
			<template #left>
				<view class="search-left text-center">

				</view>
			</template>
			<template #center>
				<view class="flex-1 search-center text-center">购物车</view>
			</template>
			<template #right>
				<view class="search-right text-center" @click="changeEdit">
					<text class="" v-if="isEdit">编辑</text>
					<text class="" v-else>完成</text>
				</view>
			</template>
		</search-slot>

		<template v-if="isListShow">
			<view class="py-5 d-flex a-center j-center bg-white">
				<view class="iconfont icon-gouwuche text-light-muted" style="font-size: 50rpx;"></view>
				<text class="text-light-muted mx-2">购物车还是为空</text>
				<view class="px-2 py-1 border border-light-secondary rounded" hover-class="bg-light-secondary">
					去逛逛
				</view>
			</view>
		</template>
		<template v-else>
			<view class="d-flex a-center py-3 border-bottom border-light-secondary" v-for="(item,index) in list"
				:key="index">
				<label class="radio d-flex a-center j-center flex-shrink" style="width: 80rpx;height: 80rpx;"
					@click="selectItem(index)">
					<radio color="#FD6801" :checked="item.checked" />
				</label>
				<image :src="item.cover" mode="widthFix" style="height: 150rpx;width: 150rpx;"
					class="border border-light-secondary rounded p-2 flex-shrink">
				</image>
				<view class="flex-1 d-flex flex-column pl-2">
					<view class="text-dark" style="font-size: 35rpx;">
						{{item.title}}
					</view>
					<view class="d-flex text-light-muted mb-1">
						<text class="my-1">
							{{item.skusText||'无多规格'}}
						</text>
					</view>
					<view class="mt-auto d-flex j-sb">
						<text slot="newprice" style="color: #f60;">￥{{item.pprice}}</text>
						<view class="a-self-end">
							<uni-number-box :min="0" :max="10" v-model="item.num"
								@change="changeNum($event,item)"></uni-number-box>
						</view>
					</view>
				</view>

			</view>
			<view class="py-5"></view>
		</template>

		<template v-if="isEdit">
			<view
				class="d-flex a-center position-fixed left-0 right-0 bottom-0 ju border-top border-light-secondary a-stretch"
				style="height: 100rpx;z-index: 100;">
				<label class="radio d-flex a-center j-center flex-shrink" style="width: 120rpx;" @click="doSelectAll">
					<radio color="#FD6801" :checked="checkedAll" :disabled="isListShow"></radio>
				</label>
				<view class="flex-1 d-flex a-center j-center font-md" style="background:#fff;">
					合计:
					<text slot="newprice" style="color: #f60;font-weight: 900;">{{totalPrice}}</text>
				</view>
				<view class="flex-1 d-flex a-center j-center main-bg-color text-white font-md"
					hover-class="main-bg-hover-color">
					结算
				</view>
			</view>
		</template>
		<template v-else>
			<view
				class="d-flex a-center position-fixed left-0 right-0 bottom-0 ju border-top border-light-secondary a-stretch"
				style="height: 100rpx;z-index: 100;">
				<label class="radio d-flex a-center j-center flex-shrink" style="width: 120rpx;" @click="doSelectAll">
					<radio color="#FD6801" :checked="checkedAll" :disabled="isListShow"></radio>
				</label>
				<view class="flex-1 d-flex a-center j-center font-md main-bg-color text-white">
					移入收藏
				</view>
				<view class="flex-1 d-flex a-center j-center bg-danger text-white font-md"
					hover-class="main-bg-hover-color" @click="doDelSelect">
					删除
				</view>
			</view>
		</template>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		unLogin
	} from '../../utils/unLogin.js'
	// import $u from '../../utils/badge.js'
	export default {
		data() {
			return {
				isEdit: true
			}
		},
		computed: {
			...mapState({
				list: state => state.cart.list
			}),
			...mapGetters(['checkedAll', 'totalPrice', 'isListShow', 'getListLength'])

		},
		// watch:{}监听的写法有些冗余，在cart.js代码中的delSelect(state)里面的$U.setBadgeBar(state.list.length)一行代码就解决了
		// watch: {
		// 	list: {
		// 		handler(n, o) {
		// 			console.log('watchnew',n);
		// 			console.log('watchold',o);
		// 			$u.setBadgeBar(n.length)
		// 		},
		// 		immediate: true, //刷新加载 立马触发一次handler
		// 		deep: true // 可以深度检测到 person 对象的属性值的变化
		// 	}
		// },
		methods: {
			...mapMutations(['selectItem']),
			...mapActions(['doSelectAll', 'getcartlist', 'doDelSelect', 'getcartlist']),
			changeEdit() {
				this.isEdit = !this.isEdit
			},
			changeNum(e, item) {
				console.log(e, item);
				item.num = e;
			}
		},
		// watch:{
		// 	getcartlist(){
		// 		this.getListLength()
		// 	}
		// },
		onShow() {
			console.log('oooooo1111111111111');
			let token = uni.getStorageSync('userinfo').token || '';
			if (token) {
				this.getcartlist()
			} else {
				unLogin()
			}
		},
		// mounted()能够实现但是冗余，建议使用onReady(),所以detail.vue中的291行代码注掉，login.vue中的111行注掉
		// mounted() {
		// 	let token=uni.getStorageSync('userinfo').token || '';
		// 	if(token){
		// 		this.getcartlist()
		// 		uni.$on('update',()=>{
		// 			this.getcartlist()
		// 		})
		// 	}else{
		// 		unLogin()
		// 	}
		// }
		
		// onReady() 不能够解决：登录前后购物车信息都能显示，改用onShow()
		// onReady() {
		// 	let token = uni.getStorageSync('userinfo').token || '';
		// 	if (token) {
		// 		this.getcartlist()
		// 	} else {
		// 		unLogin()
		// 	}
		// }
	}
</script>

<style>

</style>